import React, {FC, useContext} from 'react';
import "./index.less";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {correspVal, getArticleLocationStr} from "@/utils/biz";
import {Button, Space} from "antd";
import {Link} from "umi";
import {FormattedMessage} from "@@/exports";
import HxIcon from "@/components/HxIcon";

interface ExpertItemProps {
  record: API.FrontAuthor;
}

/**
 * ExpertItem 页面
 */
const ExpertItem: FC<ExpertItemProps> = (props) => {
  const {record} = props;
  const {isZhCN} = useContext(HxConfigContext)
  return (
    <div className={"expert-item-container"}>
      <div className={"expert-item-header"}>
        <div className={"expert-item-header-left"}>
          <Link to={`/expert/${record?.id}`} target="_blank" className={"expert-name"}
            dangerouslySetInnerHTML={{__html: correspVal(isZhCN, record?.nameCn, record?.nameEn) || ""}}
          />
          <div className={"expert-address"}> {correspVal(isZhCN, record?.addressCn, record?.addressEn)}</div>
        </div>
        <div className={"expert-item-header-right"}>
          <Button size={"middle"} type="primary">
            <Link to={`/expert/${record?.id}`} target="_blank">
              <FormattedMessage id="expert.homepage"/>
            </Link>
          </Button>
        </div>
      </div>
      <div className={"expert-item-content"}>
        <div className={"expert-last-aritle"}>
          <div className={"expert-last-aritle-header"}>
            <div className={"expert-last-aritle-header-title"}>
              <FormattedMessage id="expert.latest-published"/>
            </div>
            <div className={"expert-last-aritle-header-extra"}>
              <Space className={"expert-sp-stats"} size={24}>
                <div><HxIcon type={"hxicon-bianjiwenzhang_huaban"}/> {record?.articleTotal}</div>
                <div><HxIcon type={"hxicon-citing"}/> {(record?.citingArticleNum)}</div>
                <div><HxIcon type={"hxicon-xiazai"}/> {record?.downloadNum}</div>
              </Space>
            </div>
          </div>
          <div className={"expert-last-aritle-content"}>
            <div className={"expert-last-aritle-row"}>
              <Link to={`/article/${record?.lastAritle?.id}`} className={"last-aritle-title"}
                    dangerouslySetInnerHTML={
                      {__html: correspVal(isZhCN, record?.lastAritle?.articleTitleCn, record?.lastAritle?.articleTitleEn) || ""}
                    }
              />
            </div>
            <div className={"expert-last-aritle-row"}>
              <div className={"last-aritle-author"}>
                {correspVal(isZhCN, record?.lastAritle?.articleAuthorCn, record?.lastAritle?.articleAuthorEn)}
              </div>
              <div className={"last-aritle-journal"}>
                <div>{correspVal(isZhCN, record?.lastAritle?.journal?.journalNameCn || record?.lastAritle?.journalNameCn, record?.lastAritle?.journal?.journalNameEn || record?.lastAritle?.journalNameEn)}</div>
                <div>{getArticleLocationStr(record?.lastAritle)}</div>
              </div>
            </div>
            <div className={"expert-last-aritle-row"}>
              <div className={"last-aritle-summary"}
                   dangerouslySetInnerHTML={
                     {__html: correspVal(isZhCN, record?.lastAritle?.articleAbstractCn, record?.lastAritle?.articleAbstractEn) || ""}
                   }
              />
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};

export default ExpertItem;
